<template>
  <div class="app-container">
    <div class="top">
      <div>
        <el-button plain class="el-icon-plus" size="mini" @click="entry"
          >进场</el-button
        >
        <el-button plain class="el-icon-plus" size="mini" @click="transfer"
          >转舍</el-button
        >
        <el-button plain class="el-icon-plus" size="mini" @click="leave"
          >离场</el-button
        >
      </div>
      <el-form
        ref="form"
        :model="formData"
        label-width="80px"
        inline
        size="mini"
      >
        <el-form-item>
          <el-input
            v-model="formData.earCode"
            placeholder="请输入耳号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="formData.pigType"
            placeholder="猪只类型"
            clearable
          >
            <el-option
              :label="item.label"
              :value="item.type"
              v-for="item in pigType"
              :key="item.type"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="formData.buildingsId"
            placeholder="所在栋舍"
            clearable
          >
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="item in searchBuildList"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formData.state" placeholder="当前状态" clearable>
            <el-option
              :label="item.label"
              :value="item.label"
              v-for="item in currentStatus"
              :key="item.type"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formData.isPresent">
            <el-option label="全部" value=""></el-option>
            <el-option
              :label="item.label"
              :value="item.label"
              v-for="item in productionType"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchTableData">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" border>
      <el-table-column
        prop="pigType"
        label="类型"
        align="center"
        :formatter="typeFormatter"
      >
      </el-table-column>
      <el-table-column
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        align="center"
        v-for="(item, index) in boarTableHead"
        :key="index"
      >
      </el-table-column>
      <el-table-column prop="" label="操作" align="center" fixed="right">
        <template slot-scope="{ row }">
          <el-button type="text" @click="deletBoar(row.id)">删除</el-button>
        </template>
      </el-table-column>
      <!-- 无数据 -->
      <template slot="empty">
        <div class="noData" v-show="tableData.length === 0">
          <img src="@/assets/images/noData.png" />
          <p>暂无数据</p>
        </div>
      </template>
    </el-table>
    <Pagination
      :total="total"
      @pagination="handlePage"
      :page.sync="formData.pageNum"
    ></Pagination>
    <!-- 进场记录 -->
    <el-dialog title="登记进场" :visible.sync="entryDialog" width="700px">
      <div>
        <el-row :gutter="10">
          <el-form
            ref="entryForm"
            :model="entryForm"
            label-width="80px"
            size="mini"
            :rules="entryRules"
          >
            <el-col :span="12">
              <el-form-item label="进场日期" prop="entryDate">
                <el-date-picker
                  v-model="entryForm.entryDate"
                  type="date"
                  :picker-options="pickerOptions"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="耳号" prop="earCode">
                <el-input v-model="entryForm.earCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="猪只类型" prop="pigType">
                <el-select v-model="entryForm.pigType" placeholder="选择类型">
                  <el-option label="公猪" value="1"></el-option>
                  <el-option label="母猪" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="入场胎次">
                <el-input
                  v-model="entryForm.entryBirths"
                  :disabled="this.isDisabled"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="进场类型" prop="entryType">
                <el-select v-model="entryForm.entryType" placeholder="选择类型">
                  <el-option label="自繁" value="自繁"></el-option>
                  <el-option label="购买" value="购买"></el-option>
                  <el-option label="转入" value="转入"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所在位置" prop="buildingsId">
                <el-select
                  v-model="entryForm.buildingsId"
                  placeholder="选择舍"
                  class="house"
                  @change="selectBuild('entry')"
                >
                  <el-option
                    :label="item.name"
                    :value="item.id"
                    style="width: 80px"
                    v-for="item in buildList"
                    :key="item.id"
                  ></el-option>
                </el-select>
                <el-select
                  v-model="entryForm.columnId"
                  placeholder="栏号"
                  class="column"
                >
                  <el-option
                    :label="item.name"
                    :value="item.id"
                    v-for="item in columnList"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出生日期">
                <el-date-picker
                  v-model="entryForm.dateOfBirth"
                  type="date"
                  :picker-options="pickerOptions"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="品种">
                <el-select v-model="entryForm.variety" placeholder="选择品种">
                  <el-option
                    :label="item.label"
                    :value="item.label"
                    v-for="item in varietyList"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态">
                <el-select
                  v-model="entryForm.state"
                  placeholder="选择状态"
                  :disabled="isDisabled"
                >
                  <el-option
                    :label="item.label"
                    :value="item.label"
                    v-for="item in status"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="操作人员">
                <el-select v-model="entryForm.operatorsUser">
                  <el-option
                    :label="$store.state.user.userInfo.nickName"
                    :value="userId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="entryForm.pigType !== '1'">
              <el-form-item label="状态日期" prop="stateDate">
                <el-date-picker
                  v-model="entryForm.stateDate"
                  type="date"
                  :picker-options="pickerOptions"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="entryForm.pigType !== '1'">
              <el-form-item label="价格">
                <el-input v-model="entryForm.price" placeholder="请输入总价格"
                  ><p slot="suffix" style="display: inline">元</p></el-input
                >
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注">
                <el-input type="textarea" v-model="entryForm.remark"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div slot="footer">
        <el-button @click="entryDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirm('entry')">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 转舍记录 -->
    <el-dialog title="登记转舍" :visible.sync="transferDialog" width="700px">
      <div>
        <el-row>
          <el-form
            ref="transferForm"
            label-width="80px"
            :model="transferForm"
            size="mini"
            :rules="entryRules"
            width="700px"
          >
            <el-col :span="12">
              <el-form-item label="转舍日期" prop="tdDate">
                <el-date-picker
                  v-model="transferForm.tdDate"
                  type="date"
                  placeholder="选择日期"
                  :picker-options="pickerOptions"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <!-- 离场选择耳号绑定id -->
            <el-col :span="12">
              <el-form-item label="耳号" prop="ids">
                <el-select v-model="transferForm.ids" placeholder="选择耳号">
                  <el-option
                    :label="item.earCode"
                    :value="item.id"
                    v-for="item in tableData"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="转入位置" prop="columnIn">
                <el-select
                  v-model="entryForm.buildingsId"
                  placeholder="选择舍"
                  class="house"
                  @change="selectBuild('transfer')"
                >
                  <el-option
                    :label="item.name"
                    :value="item.id"
                    style="width: 80px"
                    v-for="item in buildList"
                    :key="item.id"
                  ></el-option>
                </el-select>
                <el-select
                  v-model="transferForm.columnIn"
                  placeholder="栏号"
                  class="column"
                >
                  <el-option
                    :label="item.name"
                    :value="item.id"
                    v-for="item in columnList"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="操作人员">
                <el-select v-model="transferForm.operatorsUser">
                  <el-option
                    :label="$store.state.user.userInfo.nickName"
                    :value="userId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注">
                <el-input
                  type="textarea"
                  v-model="transferForm.remark"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div slot="footer">
        <el-button @click="transferDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirm('transfer')">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 离场记录 -->
    <el-dialog title="登记离场" :visible.sync="leaveDialog" width="700px">
      <div>
        <el-row>
          <el-form
            ref="leaveForm"
            label-width="80px"
            :model="leaveForm"
            size="mini"
            :rules="entryRules"
            width="700px"
          >
            <el-col :span="12">
              <el-form-item label="离场日期" prop="exitDate">
                <el-date-picker
                  value-format="yyyy-MM-dd HH:mm:ss"
                  v-model="leaveForm.exitDate"
                  type="date"
                  :picker-options="pickerOptions"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="耳号" prop="ids">
                <el-select v-model="leaveForm.ids" placeholder="选择耳号">
                  <el-option
                    :label="item.earCode"
                    :value="item.id"
                    v-for="item in tableData"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="离场类型" prop="exitType">
                <el-select v-model="leaveForm.exitType" placeholder="选择类型">
                  <el-option label="死淘" value="死淘"></el-option>
                  <el-option label="育成" value="育成"></el-option>
                  <el-option label="转出" value="转出"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="leaveForm.exitType === '死淘'">
              <el-form-item label="离场原因" prop="exitCause">
                <el-select v-model="leaveForm.exitCause" placeholder="选择原因">
                  <el-option
                    :label="item.label"
                    :value="item.label"
                    v-for="(item, index) in leaveCause"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="重量">
                <el-input v-model="leaveForm.weight" placeholder="输入数字"
                  ><p slot="suffix" style="display: inline">kg</p></el-input
                >
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="金额">
                <el-input v-model="leaveForm.price" placeholder="输入数字"
                  ><p slot="suffix" style="display: inline">元</p></el-input
                >
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="头单价">
                <el-input v-model="leaveForm.unitPrice" placeholder="输入数字"
                  ><p slot="suffix" style="display: inline">元</p></el-input
                >
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="操作人员">
                <el-select v-model="leaveForm.operatorsUser">
                  <el-option
                    :label="$store.state.user.userInfo.nickName"
                    :value="userId"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注">
                <el-input
                  type="textarea"
                  v-model="leaveForm.remark"
                  placeholder="请输入备注"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div slot="footer">
        <el-button @click="leaveDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirm('leave')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import cloneDeep from "lodash/cloneDeep";
import {
  pigType,
  currentStatus,
  productionType,
  boarTableHead,
  status,
} from "./constant/constant.js";
import {
  boarList,
  boarEntry,
  boarMoveBuildings,
  boarLeave,
  boarDelete,
} from "@/api/production-management/boar.js";
import { getColumnByBuildingsId } from "@/api/system-setup/building";
import { mixins } from "./mixin/index.js";
export default {
  mixins: [mixins],
  data() {
    return {
      isDisabled: false,
      formData: {
        //搜索条件
        earCode: "", //耳号
        pigType: "", //猪只类型
        buildingsId: null, //栋舍
        state: "", //状态
        isPresent: "在场", // 是否在场
        pageNum: 0,
        pageSize: 10,
      },
      tableData: [],
      entryForm: {
        buildingsId: null, //舍
        buildsName: "",
        columnId: null, //栏号
        columnName: "",
        //createTime: "",
        dateOfBirth: "", //出生日期
        earCode: "", //耳号
        entryBirths: 0, //入场胎次
        entryDate: "", //进场日期
        entryType: "", //进场类型
        //id: 0,
        isPresent: "在场", //是否在场
        location: "", //所在位置（回显）
        operatorsUser: null, //创建人
        operatorsUserName: "",
        // pageNum: 0,
        // pageSize:10,
        pigType: "", //猪只类型
        price: 0, //价格
        remark: "", //备注
        state: "", //状态
        stateDate: "", //状态日期
        tdDate: "",
        updateTime: "", //转舍日期
        variety: "", //品种
      },
      transferForm: {
        //id: 0,
        operatorsUser: null,
        pageNum: 0,
        pageSize: 10,
        tdDate: "", //转舍日期
        remark: "",
        ids: null,
        columnIn: null,
      },
      leaveForm: {
        exitCause: "", //离场原因
        exitDate: "", //离场日期
        //exitPigType: 0,
        exitType: "", //离场类型
        ids: null, //耳号id
        operatorsUser: null,
        pageNum: 0,
        pageSize: 10,
        price: 0,
        remark: "",
        unitPrice: 0, //头单价
        weight: 0, //重量
      },
      entryRules: {
        earCode: [{ required: true, message: "请输入耳号", trigger: "blur" }],
        entryDate: [
          {
            required: true,
            message: "请选择进场日期",
            trigger: "change",
          },
        ],
        pigType: [
          { required: true, message: "请选择猪只类型", trigger: "change" },
        ],
        entryType: [
          { required: true, message: "请选择进场类型", trigger: "change" },
        ],
        buildingsId: [
          { required: true, message: "请选择所在位置", trigger: "change" },
        ],
        stateDate: [
          {
            required: true,
            message: "请选择状态日期",
            trigger: "change",
          },
        ],
        tdDate: [
          {
            required: true,
            message: "请选择转舍日期",
            trigger: "change",
          },
        ],
        ids: [{ required: true, message: "请选择耳号", trigger: "change" }],
        columnIn: [
          { required: true, message: "请选择所在位置", trigger: "change" },
        ],
        exitDate: [
          {
            required: true,
            message: "请选择离场日期",
            trigger: "change",
          },
        ],
        exitType: [
          { required: true, message: "请选择类型", trigger: "change" },
        ],
        exitCause: [{ required: true, message: "请选原因", trigger: "change" }],
      },
      pigType,
      currentStatus,
      productionType,
      boarTableHead,
      status,
    };
  },
  created() {
    this.getBoarList();
    this.getBulidList();
  },
  methods: {
    //获取种猪列表
    async getBoarList(data = this.formData) {
      let res = await boarList(data);
      if (res.code == 200) {
        this.tableData = res.data.list;
        this.total = res.data.total;
      }
    },
    //选择栏号
    async selectBuild(type) {
      let res = await getColumnByBuildingsId(this.entryForm.buildingsId);
      if (res.code == 200) {
        this.columnList = res.data;
        switch (type) {
          case "entry":
            this.entryForm.columnId = res.data[0].id;
            break;
          case "transfer":
            this.transferForm.columnIn = res.data[0].id;
        }
      }
    },
    searchTableData() {
      //let data = Object.assign(this.entryForm, this.formData);
      this.formData.pageNum = 1;
      this.getBoarList();
    },
    deletBoar(id) {
      this.$alert("删除后猪只信息将被清空", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        showCancelButton: true,
      })
        .then(async () => {
          let res = await boarDelete(id);
          if (res.code == 200) {
            this.tableData.length > 1
              ? this.formData.pageNum
              : this.formData.pageNum--;
            this.getBoarList();
          }
        })
        .catch(() => {});
    },
    //分页器
    handlePage(val) {
      this.formData.pageNum = val.page;
      this.formData.pageSize = val.limit;
      this.getBoarList();
    },
    confirm(type) {
      let form = `${type}Form`;
      this.$refs[form].validate(async (valid) => {
        if (valid) {
          switch (type) {
            case "entry":
              let entryRes = await boarEntry(this.entryForm);
              if (entryRes.code == 200) {
                this.getBoarList();
                this.entryDialog = false;
              }
              break;
            case "transfer":
              let transferData = cloneDeep(this.transferForm);
              transferData.ids = [transferData.ids];
              let transferRes = await boarMoveBuildings(transferData);
              if (transferRes.code == 200) {
                //this.entryForm = cloneDeep(this.defaultEntryForm);
                this.getBoarList();
                this.transferDialog = false;
              }
              break;
            case "leave":
              let data = cloneDeep(this.leaveForm);
              data.ids = [data.ids];
              let leaveRes = await boarLeave(data);
              if (leaveRes.code == 200) {
                //this.entryForm = cloneDeep(this.defaultEntryForm);
                this.tableData.length > 1
                  ? this.formData.pageNum
                  : this.formData.pageNum--;
                this.getBoarList();
                this.leaveDialog = false;
              }
              break;
          }
        } else {
          return false;
        }
      });
    },
    typeFormatter(row) {
      return row.pigType === "1" ? "公猪" : "母猪";
    },
  },
  watch: {
    "entryForm.pigType": {
      handler(newValue) {
        if (newValue === "1") {
          this.entryForm.entryBirths = 0;
          this.entryForm.state = "后备";
          this.isDisabled = true;
        } else {
          this.isDisabled = false;
        }
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.el-date-editor {
  width: 160px;
}
::v-deep .house > .el-input {
  width: 90px;
}
::v-deep .column > .el-input {
  width: 70px;
}
</style>
